{% extends 'base.html' %}  
{% load static %}  

{% block title %}详细图表 - SaveStar{% endblock %}  

{% block header_buttons %}  
<div class="btn-group">  
    <a href="{% url 'statistics' %}" class="btn btn-sm btn-outline-primary">概览</a>  
    <a href="{% url 'statistics_charts' %}" class="btn btn-sm btn-primary active">详细图表</a>  
</div>  
{% endblock %}  

{% block content %}  
<div class="container-fluid">  
    <h1 class="h3 mb-4 text-gray-800">详细图表</h1>  
    
    <div class="card shadow mb-4">  
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">  
            <h6 class="m-0 font-weight-bold text-primary">图表分析</h6>  
        </div>  
        <div class="card-body">  
            <form id="chartForm" class="mb-4">  
                <div class="row">  
                    <div class="col-md-3 mb-3">  
                        <label for="chart_type">图表类型</label>  
                        <select class="form-control" id="chart_type" name="chart_type">  
                            <option value="monthly">月度对比</option>  
                            <option value="category">分类对比</option>  
                            <option value="daily">日支出趋势</option>  
                            <option value="balance">余额变化</option>  
                        </select>  
                    </div>  
                    <div class="col-md-3 mb-3">  
                        <label for="period">时间周期</label>  
                        <select class="form-control" id="period" name="period">  
                            <option value="week">最近一周</option>  
                            <option value="month">最近一月</option>  
                            <option value="quarter">最近三月</option>  
                            <option value="year">最近一年</option>  
                        </select>  
                    </div>  
                    <div class="col-md-3 mb-3 d-flex align-items-end">  
                        <button type="button" class="btn btn-primary btn-apply">应用</button>  
                    </div>  
                </div>  
            </form>  
            
            <!-- 图表容器 -->  
            <div class="chart-container" style="height: 400px; position: relative;">  
                <canvas id="monthlyTrendChart" style="display: none;"></canvas>  
                <canvas id="categoryComparisonChart" style="display: none;"></canvas>  
                <canvas id="dailyExpenseChart" style="display: none;"></canvas>  
                <canvas id="balanceChart" style="display: none;"></canvas>  
                
                <!-- 加载状态 -->  
                <div id="loading" class="text-center" style="display: none;">  
                    <div class="spinner-border text-primary" role="status">  
                        <span class="sr-only">加载中...</span>  
                    </div>  
                </div>  
                
                <!-- 错误信息 -->  
                <div id="error" class="text-center text-danger" style="display: none;">  
                    加载图表失败，请重试  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
{% endblock %}  

{% block extra_js %}  
<!-- 确保引入Chart.js库 -->  
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>  
<!-- 使用正确的JS文件路径 -->  
<script src="{% static 'savestar/js/statistics_charts.js' %}"></script>  
{% endblock %}  